<script lang="ts" setup>
import { debounce } from "@pureadmin/utils";
import * as echarts from "echarts";
import { defineProps, nextTick, onMounted, onUnmounted, ref, watchEffect } from "vue";
const props = defineProps(["data"]);
const chartRef = ref();
let myChart = null;
const charts = ref([]);
const getCustomData = () => {
  const { data } = props;
  let yAxis = {};
  let series: any = {};

  const { unit, data: itemData } = data;
  // 1、yAxis
  yAxis = {
    name: unit,
    nameRotate: 1,
    nameTextStyle: {
      color: "rgba(255,255,255,0.62)",
      fontSize: 11
    },
    show: true,
    splitNumber: 4,
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255, 255, 255, 0.25)"
      }
    },
    axisLabel: {
      color: "rgba(255,255,255,0.62)",
      fontSize: 11
    }
  };
  // 2、series
  series = itemData.map(item => {
    return {
      name: item.nameDesc,
      type: "line",
      smooth: true,
      showSymbol: false,
      data: item.value
    };
  });
  return { yAxis, series };
};
const handleRender = () => {
  const { data } = props;
  const { yAxis, series } = getCustomData();
  const option = {
    color: ["#3CB1FB", "#D29E08", "#FB6E77", "#FF70CF", "#07A872", "#ED8139", "#2174FF"],
    grid: {
      left: "5%",
      right: "5%",
      top: "20%",
      bottom: "10%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      appendToBody: true,
      formatter: function (params) {
        const barData = params;
        if (barData.length === 1) {
          const item = barData[0];
          return `<div style="display:flex;align-items:center;justify-content:space-between;"><div style="display:flex;align-items:center;"><div style="width: 8px;height: 3px;background:${
            item.color
          };margin-right:4px;"></div><span style="font-weight: 400;color: rgba(255,255,255,0.9);line-height: 18px;">${params[0].axisValue}：</span></div><span style="font-weight: 600;line-height: 18px;">${item.value || item.value === 0 ? Number(item.value).toLocaleString() : "-"}</span></div>`;
        } else {
          let str = "";
          barData.forEach(item => {
            str += `<div style="display:flex;align-items:center;justify-content:space-between;"><div style="display:flex;align-items:center;"><div style="width: 8px;height: 3px;background:${
              item.color
            };margin-right:4px;"></div><span style="font-weight: 400;color: rgba(255,255,255,0.9);line-height: 18px;">${item.seriesName}：</span></div><span style="font-weight: 600;line-height: 18px;">${item.value || item.value === 0 ? Number(item.value).toLocaleString() : "-"}</span></div>`;
          });
          return `<div><div style="margin-bottom:2px">${params[0].axisValue}</div>${str}</div>`;
        }
      },
      enterable: true,
      borderColor: "transparent",
      backgroundColor: "rgba(9,28,59,0.8)",
      padding: [4, 8],
      textStyle: {
        fontSize: 12,
        color: "rgba(255,255,255,0.9)"
      },
      extraCssText:
        "box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05);border-radius: 3px;backdrop-filter: blur(1px);"
    },
    legend: {
      show: data.data.length > 1,
      itemGap: 5,
      top: 0,
      right: 0,
      itemWidth: 14,
      itemHeight: 8,
      textStyle: {
        color: "rgba(255,255,255,0.62)",
        fontSize: 11
      }
    },
    xAxis: [
      {
        type: "category",
        axisLabel: {
          color: "rgba(255,255,255,0.62)",
          fontSize: 12
        },
        axisTick: {
          show: false
        },
        data: data.xaxis
      }
    ],
    yAxis,
    series
  };
  try {
    option && myChart.setOption(option);
  } catch (error) {}
};
const initChart = () => {
  if (!chartRef.value) {
    return;
  }
  myChart = echarts.init(chartRef.value);
  handleRender();
  charts.value.push(myChart);
};
// 处理窗口大小变化
const handleResize = debounce(() => {
  charts.value.forEach(chart => {
    chart.resize();
  });
}, 60);
watchEffect(() => {
  handleRender();
});
onMounted(() => {
  nextTick(() => {
    initChart();
  });
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  charts.value.forEach(chart => {
    chart.dispose();
  });
});
</script>
<template>
  <div ref="chartRef" class="chart-line"></div>
</template>
<style lang="scss" scoped>
.chart-line {
  width: 100%;
  height: 134rpx;
}
</style>
